<template>
    <div>
      <el-container :style="{'height':mainHeight+'px'}">
        <el-header>
        <span class="title">欢迎来到代码自助机</span>
        </el-header>
          <el-main>
            <el-row style="height: 20%">
              <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
            </el-row>
            <el-row style="height: 20%">
              <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
            </el-row>
            <el-row style="height: 20%">
              <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
            </el-row>
            <el-row style="height: 20%">
              <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
            </el-row>
            <el-row style="height: 20%">
              <el-col :span="24"><div class="grid-content bg-purple-dark">
                <el-button type="warning" round @click="goGenerate">开始我们的旅途</el-button>
              </div></el-col>
            </el-row>

          </el-main>

<!--        <my-dialog :show.sync="generate"  :title="'生成配置'" :confirmText="`GO`">-->
<!--          <generate-form></generate-form>-->
<!--        </my-dialog>-->
        <el-dialog title="生成配置" :visible.sync="generate">
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="库类型" prop="DataBasename">
              <el-select v-model="form.DataBasename" placeholder="请选择" >
                <el-option label="Mysql" value="mysql"></el-option>
                <el-option label="Oracle" value="oracle"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="驱动" label-width="80px" prop="driverName">
              <el-select v-model="form.driverName" placeholder="请选择">
                <el-option label="Mysql" value="com.mysql.jdbc.Driver"></el-option>
                <el-option label="Oracle" value="oracle"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="域名" prop="ip">
              <el-input v-model="form.ip"></el-input>
            </el-form-item>
            <el-form-item label="端口号" prop="port">
              <el-input v-model="form.port"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="userpwd">
              <el-input v-model="form.userpwd"></el-input>
            </el-form-item>
            <el-form-item label="库名" prop="database">
              <el-input v-model="form.database"></el-input>
            </el-form-item>
            <el-form-item label="链接地址">
              <el-input v-model="url"></el-input>
            </el-form-item>
            <el-form-item label="包名" prop="packageName">
              <el-input v-model="form.packageName"></el-input>
            </el-form-item>
            <el-form-item label="模块名" prop="moduleName">
              <el-input v-model="form.moduleName"></el-input>
            </el-form-item>
            <el-form-item label="作者" prop="author">
              <el-input v-model="form.author"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="testCon">测试链接</el-button>
            <el-button type="primary" @click="generatrCode">确 定</el-button>
          </div>
        </el-dialog>
      </el-container>
    </div>
</template>

<script>
  import GenerateForm from "./GenerateForm";
  import MyDialog from "./MyDialog";
    export default {
        name: "MainUI",
        components:{GenerateForm,MyDialog},
        data(){
            return {
                mainHeight:'',
                generate:false,
                form: {
                    DataBasename: '',
                    driverName: '',
                    ip:'localhost',
                    username:'',
                    userpwd:'',
                    port:'3306',
                    database:'',
                    packageName:'',
                    moduleName:'',
                    author:''
                },
                formLabelWidth: '120px',
                rules: {
                    DataBasename: [
                        { required: true, message: '请选择库类型', trigger: 'change' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' }
                    ],
                    driverName: [
                        { required: true, message: '请选择驱动', trigger: 'change' }
                    ],
                    ip: [
                        { trigger: 'change',validator:(rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error('IP地址不得为空'));
                                } else {
                                    if ( !(/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(value))){
                                        callback(new Error('非法ip地址'));
                                    }else{
                                        callback();
                                    }

                                }
                            } }
                    ],
                    port: [
                        {  required: true, message: '端口号不得为空', trigger: 'change' }
                    ],
                    username: [
                        {  required: true, message: '请输入用户名', trigger: 'change' }
                    ],
                    userpwd: [
                        { required: true, message: '请输入密码', trigger: 'change' }
                    ],
                    database: [
                        { required: true, message: '请输入数据库', trigger: 'blur' }
                    ],
                    packageName:[
                        {trigger:'blur',validator:(rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error('包名不得为空'));
                                } else {
                                    if ( !(/^([a-zA-Z]+[.][a-zA-Z]+)[.]*.*/.test(value))){
                                        callback(new Error('非法包名'));
                                    }else{
                                        callback();
                                    }

                                }
                            }}
                    ],
                    moduleName:[
                        {trigger:'blur',validator:(rule, value, callback) => {
                if (value === '') {
                    callback(new Error('模块名不得为空'));
                } else {
                    if ((/(\s+)|(\.+)|([\u4e00-\u9fa5])/g.test(value))){
                        callback(new Error('模块名必须是英文且不得有空格和分隔符'));
                    }else{
                        callback();
                    }

                }
            }}
                    ],
                  author: [
                    { required: true, message: '请输入作者名', trigger: 'blur' }
                  ],
                }
            }
        },
        computed:{
            url(){
                console.log(`jdbc:mysql://${this.form.ip}:${this.form.port}/${this.form.database}`)
                return `jdbc:mysql://${this.form.ip}:${this.form.port}/${this.form.database}`;
            }
        },
        methods:{
            goGenerate(){
                this.generate=true;
            },
            async testajax(){
                let result=await this.$ajaxGet("/generator/xjr-generator/test",{message:'1'})
                console.log(result)
            },
            testCon(){
                let g=this;
                g.$refs['form'].validate((valid) => {
                    if (valid) {
                        let datasource={};
                        datasource.url=this.url;
                        datasource.userName=this.form.username;
                        datasource.userPwd=this.form.userpwd;
                        datasource.driverName=this.form.driverName;
                        g.$ajaxPost("/xjr-generator/testConnect",datasource).then(result=>{
                            if(!result){
                                alert("链接失败")
                            }else{
                                alert("连接成功")
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });


            },
            generatrCode(){
              let g=this;
              g.$refs['form'].validate((valid) => {
                if (valid) {
                  let params={};
                  params.url=this.url;
                  params.userName=this.form.username;
                  params.userPwd=this.form.userpwd;
                  params.driverName=this.form.driverName;
                  params.packageName=this.form.packageName;
                  params.moduleName=this.form.moduleName;
                  params.author=this.form.author;
                  params.dataBaseName=this.form.database;
                  this.$ajaxPost("/xjr-generator/generate",params).then(result=>{
                    if(result){
                      console.log(result);
                      let url=process.env.NODE_ENV==='production'?'http://47.98.155.18:4567':'http://127.0.0.1:4567';
                      window.open(`${url}/xjr-generator/downLoadZip?${result}`)
                    }else{
                      alert("生成失败")
                    }
                  })
                } else {
                  console.log('error submit!!');
                  return false;
                }
              });

            },

        },
        mounted() {
            this.mainHeight=window.innerHeight;
            window.onresize=()=>{
                this.mainHeight=event.target.innerHeight;
            }
        }
    }
</script>

<style scoped>
.title{
   text-shadow: 3px -3px black, 2px -2px white;
  font-weight: bold;
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
  font-size: 20px;
  color: #FFFFFF;
}
  .el-form-item__content{
    margin-left: 0px;
  }
</style>
